<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{admin/layout}">

<head>
	<title>User Manage</title>
	<style>

	</style>
</head>

<body layout:fragment="content">
	<div class="card shadow">
		<div class="card-header border-bottom d-flex justify-content-between align-items-center">
			<h5 class="card-title mb-0">User List</h5>
			<div class="d-grid gap-2 d-md-block">
				<!--<button class="btn btn-sm btn-primary" type="button" onclick="modifyUserModal('')">New</button>-->
			</div>
		</div>
		<div class="card-body">
			<table id="userTable"></table>
		</div>
		<!--<div class="card-footer pt-0">
			Footer
		</div>-->
	</div>
	<!---->
	<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">User Setting</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<form id="userForm">
								<input type="hidden" class="form-control" value="" id="userId" name="userId">
								<!--<div class="mb-3">
									<label class="form-label">Account</label>
									<input type="text" class="form-control" value="" id="userAccount" name="userAccount">
								</div>-->
								<div class="mb-3">
									<label class="form-label">Full-Name</label>
									<input type="text" class="form-control" value="" id="userName" name="userName">
								</div>
								<div class="mb-3">
									<label class="form-label">Mobile</label>
									<input type="text" class="form-control" value="" id="userMobile" name="userMobile">
								</div>
								<div class="mb-3">
									<label class="form-label">ID-card</label>
									<input type="text" class="form-control" value="" id="userIdcard" name="userIdcard">
								</div>
								<div class="mb-3">
									<label class="form-label">Avatar</label>
									<input type="hidden" class="form-control" value="" id="userAvatar" name="userAvatar">
									<div class="quickgo-file-main">
										<img src="" alt="Avatar">
										<div>
											<button>
												<span>Select Picture</span>
												<input type="file" onchange="MyUpload(this, 'userAvatar');">
											</button>
										</div>
									</div>
								</div>
								<!-- Save button -->
								<div class="d-flex justify-content-end mt-4">
									<button type="button" class="btn btn-default"
										onclick="closeUserModal()">Close</button>
									<button type="submit" class="btn btn-primary">Submit</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<script layout:fragment="script">
		var userFormValidate = null
		$(document).ready(function () {
			userFormValidate = 
			$("#userForm").validate({
				rules: {
					userId: {
						required: false
					},
					userAccount: {
						required: true
					},
					userPassword: {
						required: true
					},
					userName: {
						required: true
					},
					userMobile: {
						required: true
					},
					userIdcard: {
						required: true
					},
					userAvatar: {
						required: true
					},
				},
				submitHandler: function (form) {
					var formData = $(form).serialize();
					saveUser(formData);
					return false
				}
			})
			loadUserTable()
		});
		function loadUserTable() {
			$('#userTable').bootstrapTable('destroy');
			$('#userTable').bootstrapTable({
				url: "[[@{'/admin/users'}]]",
				uniqueId: 'userId',
				dataType: "json",
				pagination: true,
				pageSize: 10,
				queryParams: function (params) {
					var temp = {
						size: params.limit,
						page: (params.offset / params.limit),
						sort: params.sort,
						sortOrder: params.order
					};
					return temp;
				},
				sidePagination: "server",
				pageList: [30, 50],
				columns: [{
					title: 'Sort',
					formatter: function (value, row, index) {
						var pageSize = $('#userTable').bootstrapTable('getOptions').pageSize;
						var pageNumber = $('#userTable').bootstrapTable('getOptions').pageNumber;
						return pageSize * (pageNumber - 1) + index + 1;
					}
				}, {
					field: 'userType',
					title: 'Role',
					formatter: function (value, row, index) {
						return ['Student','Staff'][value]
					}
				}, {
					field: 'userAccount',
					title: 'Account',
					formatter: function (value, row, index) {
						return value
					}
				}, {
					field: 'userAvatar',
					title: 'Avatar',
					formatter: function (value, row, index) {
						return '<img class="avatar-img rounded-2 avatar-sm" src=" ' + value + ' " alt="">'
					}
				}, {
					field: 'userName',
					title: 'Full-Name',
					formatter: function (value, row, index) {
						return value
					}
				}, {
					field: 'userMobile',
					title: 'Mobile',
					formatter: function (value, row, index) {
						return value
					}
				}, {
					field: 'userIdcard',
					title: 'ID-card',
					formatter: function (value, row, index) {
						return value
					}
				}, {
					field: 'userStatus',
					title: 'Available',
					formatter: function (value, row, index) {
						return ['No','Yes'][value]
					}
				}, {
					field: 'userTime',
					title: 'Created',
					formatter: function (value, row, index) {
						return value
					}
				}, {
					title: 'Operate',
					field: 'userId',
					class: 'text-center',
					width: '20%',
					formatter: function (value, row, index) {
						let res = '<button class="btn btn-sm btn-warning" onclick="modifyUserModal(\'' + value + '\')">Modify</button>&nbsp;';
						if(row.userStatus == 1){
							res += '<button class="btn btn-sm btn-danger " onclick="statusUser(\'' + value + '\', 0)">UnAvailable</button>';
						}else{
							res += '<button class="btn btn-sm btn-primary " onclick="statusUser(\'' + value + '\', 1)">Available</button>';
						}
						return res;
					}
				},],
				onPostBody: function (value) {
					$(".fixed-table-container").css('padding-bottom', '37px');
				}
			});
		}
		function closeUserModal() {
			userFormValidate.resetForm()
			$('#userModal').modal('hide')
		}
		function modifyUserModal(userId) {
			$(".quickgo-file-main").children("img").css("display", 'none')
			if (userId) {
				var data = $("#userTable").bootstrapTable('getRowByUniqueId', userId);
				$('#userId').val(data.userId)
				$('#userAccount').val(data.userAccount)
				$('#userPassword').val(data.userPassword)
				$('#userType').val(data.userType)
				$('#userName').val(data.userName)
				$('#userMobile').val(data.userMobile)
				$('#userIdcard').val(data.userIdcard)
				$('#userAvatar').val(data.userAvatar)
				if(data.userAvatar){
					$(".quickgo-file-main").children("img").attr("src", data.userAvatar).css("display", 'block')
				}
			} else {
				$('#userId').val('')
				$('#userAccount').val('')
				$('#userPassword').val('')
				$('#userType').val('')
				$('#userName').val('')
				$('#userMobile').val('')
				$('#userIdcard').val('')
				$('#userAvatar').val('')
			}
			$('#userModal').modal('show')
		}
		function saveUser(data) {
			$.post(ctx + "/admin/updateUser", data, function (resp) {
				if (resp.status == 0) {
					loadUserTable();
					$('#userModal').modal('hide');
				}
				layer.msg(resp.msg);
			})
		}
		function statusUser(userId, status) {
			layer.msg("Do you want to update it", {
				title: 'tip', icon: 3, btn: ["Confirm", "Cancel"],
				yes: function () {
					$.ajax({
						type: "post",
						url: ctx + "/admin/statusUser",
						data: {
							"userId": userId,
							"userStatus": status,
						},
						success: function (resp) {
							if (resp.status == 0) {
								loadUserTable()
							}
							layer.msg(resp.msg);
						}
					});
				},
				btn2: function () {
					// layer.msg("Cancel");
				}
			});
		}
	</script>
</body>

</html>